<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="row">
	<div class="col-lg-12">
		<h2>基础监控项</h2>
	</div>
</div>
<div class="row">
	<div class="col-xs-6 col-md-7">
		<div id="cpuStatChart" style="height: 300px;"></div>
	</div>
	<div class="col-xs-6 col-md-5">
		<div class="row" id="memStatChart" style="height: 300px;"></div>
	</div>
</div>
<!--/.row-->
<script type="text/javascript">

var basicMonitor = {
	
	ticket: -1,
	cpuStatChart: {},
	cpuStatOpts: ['used', 'idle', 'wait', 'sys', 'user'],
	cpuStatSeriesData: [],
	
	memStatChart: {},
	memStatSeriesData: [],
	
	date1: [],
	date2: [],
	
	loopCount: 0,
	
	drawCpuStatChart : function(cpuStat) {
		var me = this;
		var date = me.date1;
		var seriesData = me.cpuStatSeriesData;
		var opts = me.cpuStatOpts;
		
		if(me.loopCount == 0) {
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]] = [];
			}
		}
		
		
		function formatCpuStatVal(doubleVal) {
			return (doubleVal * 100).toFixed(2);
		}

		function prepareCpuStatData(shift, cpuStat) {
			if (shift) {
				if(date.length > 10) {
					date.shift();
					for (var i = 0; i < opts.length; i++) {
						seriesData[opts[i]].shift();
					}
				}
			}
			date.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]].push(formatCpuStatVal(cpuStat[opts[i]]));
			}
		}
		
		prepareCpuStatData(true, cpuStat);
		me.cpuStatChart.setOption({
			xAxis : {
				data : date
			},
			series : [ {
				name: 'used',
				data: seriesData['used']
			}, {
				name: 'idle',
				data: seriesData['idle']
			}, {
				name: 'wait',
				data: seriesData['wait']
			}, {
				name: 'sys',
				data: seriesData['sys']
			}, {
				name: 'user',
				data: seriesData['user']
			} ]
		});
	},
	
	drawMemStatChart: function(memStat) {
		var me = this;
		var date = me.date2;
		var seriesData = me.memStatSeriesData;
		var opts = [ 'used' ];

		if(me.loopCount == 0) {
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]] = [];
			}
		}
		
		function formatMemStatVal(val) {
			var _val = (val / (1024 * 1024 * 1024)).toFixed(1);
			return _val;
		};
		
		function prepareMemStatData(shift, memStat) {
			if (shift) {
				if(date.length > 10) {
					date.shift();
					for (var i = 0; i < opts.length; i++) {
						seriesData[opts[i]].shift();
					}
				}
			}
			date.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]].push(formatMemStatVal(memStat[opts[i]]));
			}
		}

			
		prepareMemStatData(false, memStat);
		
		me.memStatChart.setOption({
			xAxis : {
				data : date
			},
			yAxis: {
				min: 0,
				max: formatMemStatVal(memStat.total)
			},
			series : [ {
				name : 'used',
				data : seriesData['used']
			}]
		});
	},
		
	drawBasicMonitorCharts: function() {
		
		var me = this;
		
		var period = 3000;
		
		interval.clear(this.ticket);
		
		this.ticket = interval.make(function() {
			
			$.get('monitor/basicinfo', {
				host: '10.118.88.29'
			}, function(resp){
				if(resp.success) {
					var row =  resp.row;
					var cpuStat = row.cpuInfo;
					var memStat = row.memInfo;
					// 实时更新cpu监控图
					me.drawCpuStatChart(cpuStat);
					// 实时更新memory监控图
					me.drawMemStatChart(memStat);
					
					me.loopCount++;
				}
			});
			
		}, period);
	},
	
	initCpuStatChart: function() {
		// 初始化echarts图表
		var me = this;
		me.cpuStatChart = echarts.init(document.getElementById('cpuStatChart'));

		var curDate = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

		var option = {
			title : {
				text : 'CPU状态',
				subtext : '纯属虚构'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'used', 'idle', 'wait', 'sys', 'user' ]
			},
			calculable : false,
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ curDate ]
			} ],
			yAxis : [ {
				type : 'value',
				min : 0,
				max : 100,
				axisLabel : {
					formatter : '{value}%'
				}
			} ],
			series : [ {
				name : 'used',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			}, {
				name : 'idle',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			}, {
				name : 'wait',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			}, {
				name : 'sys',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			}, {
				name : 'user',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			} ]
		};
		
		// 为echarts对象加载数据 
		me.cpuStatChart.setOption(option);
	},
	
	initMemStatChart: function() {
		// 初始化echarts图表
		var me = this;
		me.memStatChart = echarts.init(document.getElementById('memStatChart'));

		var curDate = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

		var option = {
			title : {
				text : 'Mem状态',
				subtext : '纯属虚构'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'used' ]
			},
			calculable : false,
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ curDate ]
			} ],
			yAxis : [ {
				type : 'value',
				min : 0,
				max: 100,
				axisLabel : {
					formatter : '{value}GB'
				}
			} ],
			series : [ {
				name : 'used',
				type : 'line',
				smooth : true,
				itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},
				data : [ 0 ]
			}]
		};
		
		// 为echarts对象加载数据 
		me.memStatChart.setOption(option);	
	}
};


$(document).ready(function() {
	
	// 初始化cpu监控图
	basicMonitor.initCpuStatChart();
	// 初始化mem监控图
	basicMonitor.initMemStatChart();
	
});
</script>
